<template>
  <div class="backstage-container">
    <div class="placeholder-content-box">
      <el-table :data="userList" stripe>
        <el-table-column sortable fixed align="center" width="120" prop="username" label="用户名"></el-table-column>
        <el-table-column align="center" width="100" prop="scope" label="角色权限"></el-table-column>
        <el-table-column sortable align="center" width="150" prop="created_at" label="注册时间"></el-table-column>
        <el-table-column sortable align="center" width="150" prop="updated_at" label="更新时间"></el-table-column>
        <el-table-column align="right" label="操作角色">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"
              @change="handleSearchUser"
            />
          </template>

          <div class="item-operation" slot-scope="scope">
            <el-button>禁用</el-button>
            <el-button @click="toModifyUser(scope.row)">修改资料</el-button>
            <template v-if="loginUser.scope === 'SP_ADMIN'">
              <el-button
                v-if="scope.row.scope === 'USER'"
                @click="setUserScope(scope.row, 'ADMIN')"
              >设置管理员</el-button>
              <el-button
                class="active"
                v-else-if="scope.row.scope === 'ADMIN'"
                @click="setUserScope(scope.row, 'SP_ADMIN')"
              >设置为超管</el-button>
              <el-button
                class="danger"
                v-else-if="scope.row.scope === 'SP_ADMIN'"
                @click="setUserScope(scope.row, 'USER')"
              >解除管理员</el-button>
            </template>
          </div>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      background
      :total="totalUser"
      :class="['flex-center']"
      layout="prev, pager, next"
      @current-change="getAllUserList"
    ></el-pagination>
  </div>
</template>

<script>
import API from '~/interface/User';
import { Table, TableColumn } from 'element-ui';
export default {
  props: {
    loginUser: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  components: {
    'el-table': Table,
    'el-table-column': TableColumn
  },
  data() {
    return {
      search: '',
      totalUser: 0,
      userList: [],
      userListCache: {} // 缓存池 防止重复请求
    }
  },

  watch: {
    search(newVal, oldVal) {
      if (!newVal.length) {
        this.getAllUserList();
      }
    }
  },

  created() {
    this.getAllUserList();
  },

  methods: {
    // 获取用户列表
    getAllUserList(page = 1) {
      const { userList, userListCache } = this;
      if (userListCache[page]) {
        this.userList = userListCache[page];
      } else {
        API.getAllUserList({ page }).then(res => {
          this.userList = res.list;
          this.totalUser = res.meta.total;
          this.userListCache[page] = res.list;
        });
      }
    },
    // 设置用户权限
    setUserScope(user, scope) {
      API.postSetScoped({ uid: user.uid, scope }).then(res => {
        user.scope = scope;
        this.$message({
          type: 'success',
          message: '权限设置成功~'
        });
      });
    },
    // 修改用户资料
    toModifyUser(user) {
      this.$router.push(`/user/modify/${user.uid}`);
    },
    // 根据关键词搜索用户
    handleSearchUser(keyword) {
      if (keyword.trim().length) {
        API.getAllUserList({ keyword }).then(res => {
          this.userList = res.list;
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.backstage-container {
  .placeholder-content-box {
    height: 540px;
    /deep/ .el-input__inner {
      width: 308px;
    }
  }

  .el-button {
    padding: 7px 20px;
  }
}
</style>